記得初次接觸Transition，是要做個畫面效果，搞了老半天，差點....不做了（還是有生出來），這是要搭配服用『熱騰騰』的W3C CSS Transitions Level 2 (2023/09)，還有MDN CSS transitions
啦，這兩個一起配最對味～

• 第一次最可貴了，得紀錄一下TransitionＸＤ
  

W3C目錄結構

1. Delta specification
2. Transitions
3. Starting of transitions
4. Application of transitions
5. Transition Events
6. DOM Interfaces
7. Privacy Considerations
8. Security Considerations
9. Changes
10. Issues commonly raised as issues with previous levels
11. Issues deferred from previous levels of the spec

章節簡介摘要

第一章， Delta specification

這裡簡短聲明，

Once the Level 1 specification is closer to complete, it will be merged with the additions here into a complete level 2 specification.

• Level 1規範接近完成，它將與此處的添加內容合併為完整的 level 2規範。
• 我找到的CSS Transitions（2018/10），而這次主要看的是W3C CSS Transitions Level 2 (2023/09)。

第二章，Transitions

本章節介紹Transitions屬性，包括：

• transition-property（要過渡的屬性）
• transition-duration（過渡的持續時間）
• transition-timing-function（時間函數）
• transition-delay（啟動延遲時間）
• transition-behavior（過渡行為）

使用transition 簡寫屬性可以同時設定這些屬性的值。在CSS Transitions Level 2 中，過渡屬性的可過渡性根據動畫類型和過渡行為來決定。這些屬性用於滑順的效果。
- 過渡屬性 transition-property可以指定縮寫屬性和 "all" 關鍵字，但對於每個可過渡的長寫屬性，都會產生單獨的過渡效果。而在 CSS 過渡 Level 2 中，當比較給定屬性的變化前樣式和變化後樣式時，屬性值是否可過渡取決於以下情況：

• 具有非animatable又非離散discrete的動畫類型，或者過渡行為 transition-behavior 設置為 "allow-discrete"，並且它們具有離散的動畫類型。
• 當具有離散動畫類型的值進行過渡時，它們在進度的 50% 時翻轉。

第三章，Starting of transitions

這章是關於『過渡的擁有元素』，取消過渡的操作，以及改進『過渡反轉』，和開始過渡的方法，確保過渡的『擁有元素』，以及使用@starting-style規則來處理特定情況下，以下為幾點重點摘要：

過渡的擁有元素The owning element of a transition

• 每個過渡，都與一個transition-property屬性的元素，或偽元素（pseudo-element）相關聯，這個元素被稱為『過渡的擁有元素』（owning element）。
• 只有那些與元素或偽元素（pseudo-element）相關聯的過渡，才會被包括在運行中的『過渡集合』中。
• 如果過渡失去了與擁有元素的關聯，例如：在取消過渡時，它將不再被視為運行中的過渡，並且不會參與動畫效果。因此，只有具有『擁有元素的過渡』才會被納入運行中的『過渡集合』中。

反轉過渡Faster reversing of interrupted transitions

過渡包括『反轉行為』，其中『反轉縮短因子』和『起始值』與過渡關聯。這確保了即使動畫效果已更新或替換，過渡在生成反轉過渡時仍使用相同的值。

• 反轉縮短因子reversing shortening factor是一個數值，用於控制過渡的『反轉速度』。當過渡被反轉時，它可以根據反轉縮短因子來調整其速度，以確保反轉行為正確。
• 反轉調整的起始值reversing-adjusted start value這是過渡的起始值，它經過調整以確保『反轉行為』正確。它通常與反轉縮短因子一起使用，以確保在反轉過渡期間達到預期的效果。

『反轉』reversing 是過渡效果的播放過程中，將動畫效果倒轉，「反向播放」，就像倒帶一樣。通過反轉，從一個狀態過渡到另一個狀態的動畫，然後再反向過渡回來，例如：按下按鈕後，元素會縮小然後再恢復正常大小。

當前過渡世代current transition generation

用於『跟蹤』網頁上的過渡狀態的概念。每當發生樣式變更事件時，這個值都會遞增，以表示網頁的過渡狀態已經改變。當創建新的過渡效果時，過渡的「過渡世代」值被設置為當前的當前過渡世代，以確保該過渡處於正確的狀態。

@starting-style 規則 @starting-style rule

• 在CSS Transitions Level 1中，過渡僅能在樣式變更事件中開始，並且需要有一個明確的「變化前樣式」，以指導過渡效果。然而，某些情況下，例如新元素的插入或元素從未被渲染到已渲染，缺乏「變化前樣式」。
• 為了解決這些問題，引入了@starting-style規則。這個規則允許定義元素的「起始樣式」，即使之前沒有明確的「變化前樣式」。這樣可以實現新元素的平滑過渡，使其能夠以預期的方式出現在畫面上。@starting-style的規則內部的樣式規則不影響「變化後樣式」，確保在特定情況下動畫效果能夠正確觸發。

第四章，Application of transitions 過渡的應用

本章討論了CSS過渡的兩個重要概念：『組合順序』（Animation composite order）和『層級應用』（Animation cascade level）。組合順序確定了在一個集合中多個過渡之間的顯示順序，並按照一定的『優先順序』進行排序。此外，具有特定類別的CSS過渡動畫在CSS層級的『特定位置』應用。

• CSS Transitions（CSS過渡）用於定義元素屬性的平滑過渡效果，當元素的屬性值發生變化時，可以產生平滑過渡效果。而CSS Animations（CSS動畫）則允許開發人員創建更複雜的動畫序列，可以在特定時間內播放多個動畫步驟。
• 這裡提到的『動畫組合順序』和『動畫層級應用』是CSS中如何處理這些過渡和動畫效果的顯示順序和層級應用。

組合順序Animation composite order

• 如果A和B都沒有擁有元素，則基於它們在全局動畫列表中的相對位置進行排序。
• 否則，如果只有A或B具有擁有元素，則具有擁有元素的動畫排在前面。
• 否則，如果A和B的擁有元素不同，則按照它們對應擁有元素的樹狀順序進行排序，對於虛擬元素，排序順序為：element > ::marker > ::before > 其他未在列表中明確提到的虛擬元素，按Unicode編碼順序遞增排列 > ::after > element子元素。
• 否則，如果A和B具有不同的過渡世代值，則按照它們對應的過渡世代按遞增順序排序。
• 否則，按照擴展過渡屬性名稱（即不進行大小寫轉換等，例如'-moz-column-width'排在'column-width'之前）的Unicode編碼遞增排列。

『層級應用』Animation cascade level

• 具有所屬元素的動畫類別「CSS Transition」的動畫將套用於 CSS 級聯的「Transitions 聲明」層級。
• 本規範中定義的標記所產生的所有其他動畫（包括不再具有所屬元素的動畫）都將套用於級聯的「動畫聲明」層級。

第五章，Transition Events 過渡事件

過渡事件的事件分派遵循一個嚴格的狀態轉換圖，確保正常播放、中斷、倒播等情況下的事件派發順序。

• 過渡事件的目標是過渡的擁有元素。如果沒有擁有元素，則不會派發任何過渡事件，但仍然會派發Web Animations中定義的動畫播放事件。
• 為了避免派發多餘的事件，事件的派發基於比較過渡在前一個動畫幀中的階段和當前狀態。
• 過渡的階段在每個動畫幀中根據特定條件進行更新，包括過渡是否有關聯效果，當前時間等。
• 每個事件的elapsedTime（經過時間）是根據特定的公式計算，並以毫秒為單位。
• 隨著每個新的動畫幀的建立，根據前一個和當前動畫幀中的過渡階段，確定要派發的事件。事件包括transitionrun、transitionstart、transitionend和transitioncancel等。
• 事件的順序和派發取決於過渡的狀態轉換，但通常是transitionrun、transitionstart和transitionend這些事件的組合。

第六章，DOM Interfaces

在CSS Transitions Level 2中，引入了兩個DOM接口，分別是CSSTransition接口和對待計算樣式變化的要求。

• CSSTransition接口，這個接口擴展了Animation接口，提供了對過渡效果的更多信息。CSSTransition接口具有以下屬性:
  • transitionProperty：這是一個只讀屬性，返回了過渡效果所應用的擴展過渡屬性名稱。
• 對待計算樣式變化的要求，該部分規定了對計算樣式的更改操作的處理方式。為了優化性能，瀏覽器可能會推遲重新計算元素的計算樣式，直到有必要時。然而，本規範中定義的所有操作，以及Web Animations中定義的可能返回本規範中定義的對象的操作，必須生成一個與完全處理了計算值的變化一致的結果。
  • 當元素的opacity屬性的指定值被更新時，瀏覽器可能會推遲重新計算opacity屬性的計算值。但是，根據本規範的要求，在後續調用getAnimations()方法時，瀏覽器必須在返回結果之前應用任何待處理的樣式變化，以生成新的CSSTransition對象。

第七章，Privacy Considerations

目前顯示

No new privacy considerations have been reported on this specification.

第八章，Security Considerations

目前顯示

No new security considerations have been reported on this specification.

第九章，Changes

Changes since Level 1, in First Public Working Draft

結語

在讀規範的過程中，延伸出取多以前未想過的議題，或許是還沒有遇到，而初次讀Transition規範的確很吃力，起初在查版本時就找來找去，剛開始還不小心讀到Transform越讀越詭異，才發現找錯啦！這次的概覽與小總結，為以後實作上碰到鬼故事做個小筆記

『Transition』過渡 與『Transform』轉變

而『Transition』與『Transform』，號稱雙劍客，一起搭配使用超讚!這裡附上不錯的連結，有機會在來好好讀Transform Spe吧。

• CSS Transitions and Transforms for Beginners
• MDN CSS transitions
• MDNCSS transforms